<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-heading">登录账号</h2>
      <div class="input-group">
        <input id="uname" type="text" v-model="user.uname" class="input-field" placeholder="请输入用户名"/><br/>
      </div>
      <div class="input-group">
        <input id="upassword" type="password" v-model="user.upassword" class="input-field"
               placeholder="请输入密码"/><br/></div>
      <div class="input-group">
        <input id="yanzhengma" type="text" v-model="user.yanzhengma" size="4" class="input-yzm"
               placeholder="请输入验证码"/><img width="100" height="50" ref="myimg" @click="doclick()" :src="url"/>
      </div>
      <br/>
      <button class="login-button" @click="dologin()">登录</button>
      <p class="login-register-text">还没有账号？<a style="text-decoration: underline;" @click="register()">注册账号</a>
      </p>
    </div>
  </div>
</template>


<script>
import axios from 'axios';
import Cookies from 'js-cookie';
import qs from 'qs';

export default {
  data() {
    return {
      url: "",
      user: {
        uname: "",
        upassword: "",

      },
      redirect: undefined
    }
  }, created() {
    this.url = "http://localhost:9990/image/" + localStorage.getItem("biaozhi") + "/123";
    //alert();
    let that = this;
    //alert(localStorage.getItem("biaozhi"));
    if (!localStorage.getItem("biaozhi")) {
      this.$axios.get("http://localhost:9990/getbiaozhi").then(response => {
        that.biaozhi = response.data;
        localStorage.setItem("biaozhi", that.biaozhi);
      });
    }
  }, methods: {
    register() {
      console.log("re===")
      this.$router.push({path: '/register'})
    },
    doclick(obj) {
      this.$refs.myimg.src = "http://localhost:9990/image/" + localStorage.getItem("biaozhi") + "/" + Math.random();
    },
    dologin() {
      //alert(localStorage.getItem("biaozhi"));
      //username  userpass yanzhengma biaozhi
      this.user.biaozhi = localStorage.getItem("biaozhi");
      let params = this.qs.stringify(this.user);
      Cookies.set("uname", this.user.uname);
      //alert(params);
      let that = this;
      console.log("params", params)
      // this.$axios.post("http://localhost:9990/user/login",params, {
      this.$axios.post("http://localhost:9990/user/login", params)
        .then(response => {
          // that.user=response.data;
          console.log(response.data);
          localStorage.setItem("uname", this.user.uname);
          // localStorage.setItem("upassword", this.user.upassword);
          localStorage.setItem("user", JSON.stringify(response.data));
          this.$router.push({path: this.redirect || '/userguanli/shouye'})
          alert('登录成功');
        }).catch(reason => {
        alert("登录失败");
      });
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* 添加背景图片 */
  background-image: url('../assets/beijing.png');
  /* 设置背景图片的大小 */
  background-size: cover;
  /* 设置背景图片的位置 */
  background-position: center;
  /* 设置背景图片不重复 */
  background-repeat: no-repeat;
}

.login-box {
  background-color: rgba(255, 255, 255, 0.4); /* 半透明的白色 */
  padding: 2rem;
  border-radius: 8px;
  width: 400px;
  height: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-heading {
  text-align: center;
  margin-bottom: 2rem;
  color: #4CAF50;
}

.input-group {
  margin-bottom: 1rem;
}

.input-field {
  width: 350px;
  padding: 0.5rem;
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-yzm {
  width: 265px;
  padding: 0.5rem;
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login-button {
  width: 380px;
  padding: 0.75rem;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.login-button:hover {
  background-color: #45a049;
}
</style>
